<template>
	<view class="Chat">
		<view class='content'>
			<view v-if="data.length">
				<view v-for="(v,i) in data" :key="i">
					<view class='time'>{{timeShow(v.time, i)}}
					</view>
					<view v-if="v.type === 0" class='rig'><img src="/static/picture.jpg" alt="" />
						<p>{{v.word}}</p>
					</view>
					<view v-if="v.type === 1" class='lef'><img src="/static/customer.png" alt="" />
						<p>{{v.word}}</p>
					</view>
				</view>
			</view>
			<p v-else class='noData'>暂无会话记录</p>
		</view>
		<view class="bot">
			<u--input class="input" placeholder="请输入内容" border="surround" clearable v-model="word"></u--input>
			<u-button class="btn" type="primary" text="发送" @click="send"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import io from 'socket.io-client'
	import {
		updUser,
		getConversationList
	} from '@/api/api.js'
	export default {
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		data() {
			return {
				word: '',
				userInfo: {},
				data: [{
					"name": "12",
					"admin": "admin",
					"word": "12",
					"time": 1754878690478,
					"state": 0,
					"type": 0
				}, {
					"name": "12",
					"admin": "admin",
					"word": "12",
					"time": 1754878690478,
					"state": 0,
					"type": 1
				}],
				socket: io("192.168.0.192:3000") //与服务器电脑连接的网络ip一致(注:端口号与webSocket的后端服务端口号一致)
			};
		},
		mounted() {
			this.Init()
			this.socket.on('errey', (res) => {
				this.data=res.data
			});
		},
		methods: {
			async Init() {
				const res = await getConversationList({
					userID: this.userInfo['_id'],
					admin: 'admin'
				})
				this.data = res.data
			},
			async send() {
				if (this.socket.id) {
					this.$refs.uToast.show({
						type: "success",
						message: "发送成功"
					});
				} else {
					this.$refs.uToast.show({
						type: "error",
						message: "服务器未响应"
					});
					return
				}
				await updUser({
					_id: this.userInfo['_id'],
					newMessage: true
				})
				this.socket.emit('sendMessage', {
					admin: 'admin',
					userID: this.userInfo['_id'],
					name: this.userInfo.name,
					word: this.word,
					type: 0,
				}, (res) => {
					this.word = ''
				});
			},
			timeShow(val, i) {
				if (!val || !this.data.length) return ''
				const lastVal = (i === 0 ? undefined : this.data[i - 1].time)
				const isChange = dayjs(lastVal).format('YYYY-MM-DD HH-mm') !== dayjs(val).format(
					'YYYY-MM-DD HH-mm')
				return isChange ? dayjs(val).format('MM-DD HH:mm') : ''
			}
		}
	}
</script>

<style lang="scss">
	.Chat {
		padding: 20rpx;
		overflow: hidden;
	}

	.content {
		height: calc(100vh - 140rpx);
		overflow-y: auto;

		view {
			overflow: hidden;

			.time {
				text-align: center;
				color: #ccc;
				font-size: 20rpx;
				padding: 6rpx 0;
			}
		}

		p {
			line-height: 60rpx;
			border-radius: 10rpx;
			padding: 0 10rpx;
			text-align: justify;
		}

		.lef {
			float: left;
			display: flex;
			align-items: center;

			img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				align-self: flex-start;
			}

			p {
				margin-left: 10rpx;
				background-color: orange;
			}
		}

		.rig {
			float: right;
			display: flex;
			flex-direction: row-reverse;
			align-items: center;

			img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				align-self: flex-start;
			}

			p {
				margin-right: 10rpx;
				background: skyblue;
			}
		}

		.noData {
			text-align: center;
			font-size: 24rpx;
			line-height: 30rpx;
			color: #ccc;
			margin-bottom: 10rpx;
		}
	}

	.bot {
		position: fixed;
		bottom: 20rpx;
		width: calc(100% - 40rpx);
		display: flex;
		justify-content: space-between;

		.input {
			background-color: #eee;
		}

		.btn {
			width: 160rpx;
			margin-left: 20rpx;
		}
	}
</style>